iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

改良版JS30系列 第 2

Day2. JS and CSS Clock

  • 分享至 

  • xImage
  •  

DEMO

為了避免到360度時突然閃一下的問題,修改了部分程式碼

1.取得初始時間

initDate();

function initDate(){
    const now = new Date();
    var seconds = now.getSeconds();
    secondDeg = ((seconds / 60) * 360) + 90;
    // console.log(secondDeg);
    
    var minutes = now.getMinutes();
    minuteDeg = ((minutes / 60) * 360) + 90;
    // console.log(minuteDeg);
    var hours = now.getHours();
    hourDeg = ((hours / 12) * 360) + 90 + (minutes / 60);
    // console.log(hourDeg);
  }
  

2.計算每一秒要走的度數

setInterval(updateDate, 1000);

function updateDate(){
   secondDeg += ((1 / 60) * 360);  //秒針每秒跑的度數
   minuteDeg += ((1 / 60 /60) * 360); //一分=360秒 分針每秒跑的度數
   hourDeg += ((1 / 60/ 60/ 12) *360 ); //一小時= 60x60x12= 4320秒
   secondHand.style.transform = `rotate(${secondDeg}deg)`;
   minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
   hourHand.style.transform = `rotate(${hourDeg}deg)`;
 }

上一篇
Day1. JS Drum Kit
系列文
改良版JS302
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言